<template>
  <div class="home">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/user/login">登录</router-link>
    </div>
    <HelloWorld v-if="active === 0" msg="Welcome to Your Vue.js App"/>
    <HomeFeed v-if="active === 1" />
    <HomeFriend v-if="active === 2" />
    <HomeMy v-if="active === 3" />
    <van-tabbar
            v-model="active"
            active-color="#07c160"
            inactive-color="#000"
    >
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="search">好文</van-tabbar-item>
      <van-tabbar-item icon="friends-o">好友</van-tabbar-item>
      <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue';
import HomeFriend from "@/components/HomeFriend";
import HomeFeed from "@/components/HomeFeed";
import HomeMy from "@/components/HomeMy";

export default {
  name: 'home',
  components: {
    HelloWorld,
    HomeFriend,
    HomeFeed,
    HomeMy,
  },
  data() {
    return {
      active: 0
    }
  }
}
</script>
